<template>
  <div class="canvas-container">
    <vue-particles id="tsparticles" :options="particlesOptions" />

  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Particles from '@tsparticles/vue3'

export default defineComponent({
  name: 'CanvasParticles',
  components: {
    Particles
  },
  setup() {
    const particlesOptions = ref({
      // ===== 画布背景设置 =====
      background: {
        color: {
          value: "block", // 背景颜色（"block"可能是笔误，建议使用十六进制值如 "#0d47a1" 或颜色名称）
        },
      },
      // ===== 全屏模式 =====
      fullScreen: {
        enable: false, // 关闭全屏模式（粒子将限制在容器内）
      },
      // ===== 全局透明度设置 =====
      opacity: {
        value: 1, // 基础透明度值（0-1）
        random: true, // 为每个粒子启用随机透明度（新版中可能需要改用对象格式）
      },
      // ===== 性能参数 =====
      fpsLimit: 120, // 最大帧率限制（建议桌面设备≤120，移动设备≤60）

      // ===== 交互设置 =====
      interactivity: {
        events: {
          onClick: {
            enable: true, // 启用点击交互
            mode: "push", // 点击时添加新粒子（需配合modes.push配置）
          },
          onHover: {
            enable: true, // 启用悬停交互
            mode: "repulse", // 悬停时产生排斥力（需配合modes.repulse配置）
          },
        },
        modes: {
          bubble: { // 气泡模式（需在事件中启用）
            distance: 400, // 影响范围
            duration: 2, // 效果持续时间（秒）
            opacity: 0.8, // 气泡透明度
            size: 10, // 气泡大小
          },
          push: { // 点击添加粒子配置
            quantity: 4, // 每次点击生成的粒子数
          },
          repulse: { // 排斥模式配置
            distance: 200, // 排斥作用距离
            duration: 0.4, // 粒子恢复原位的时间（秒）
          },
        },
      },

      // ===== 粒子核心配置 =====
      particles: {
        color: {
          value: "#fff", // 粒子基础颜色（建议优先使用十六进制值）
          animation: {
            enable: true, // 启用颜色渐变动画
            speed: 20, // 颜色变化速度（值越大越快）
            sync: true, // 所有粒子同步颜色变化
          },
        },
        // ===== 粒子间连线 =====
        links: {
          color: "#fff", // 连线颜色
          distance: 150, // 可连接的最大距离（像素）
          enable: true, // 启用连线
          opacity: 0.8, // 连线透明度
          width: 0.5, // 连线宽度
        },
        // ===== 粒子运动 =====
        move: {
          direction: "none", // 基础移动方向（"none"表示随机方向）
          enable: true, // 启用粒子移动
          outModes: "bounce", // 边缘碰撞模式（新版可能需要使用小写"bounce"）
          random: false, // 是否启用随机速度（新版建议在speed中使用{ min, max }）
          speed: 1, // 移动速度（建议新版改用对象格式如 { min: 1, max: 5 }）
          straight: false, // 是否直线移动
        },
        // ===== 粒子数量 =====
        number: {
          density: {
            enable: true, // 根据屏幕密度自动调整数量
          },
          value: 30, // 基础粒子数量
        },
        // ===== 粒子透明度 =====
        opacity: {
          value: 0.5, // 基础透明度（新版建议使用对象格式如 { min: 0.3, max: 0.7 }）
        },
        // ===== 粒子形状 =====
        shape: {
          type: "circle", // 粒子形状（可选：circle, triangle, polygon等）
        },
        // ===== 粒子尺寸 =====
        size: {
          value: { min: 1, max: 5 }, // 随机尺寸范围（兼容v3+）
        },
      },
      // ===== 高分辨率适配 =====
      detectRetina: true, // 自动适配Retina显示屏（保持开启）
    });
    return { particlesOptions }
  }
})
</script>

<style scoped>
#tsparticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99%;
}
</style>